<template>
  <div style="width:99%;position:absolute;height:99%;">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="$t('投资架构图')" name="first">
        <div class="top">
          <div v-for="(item,k) in btnList" :key="k" class="btn" :style="'background:'+item.color">
            {{ item.name }}
          </div>
        </div>
        <div id="container" />
      </el-tab-pane>
      <el-tab-pane :label="$t('项目穿透图')" name="second">
        <div v-if="activeName === 'second'" style="width: 100%; min-height: 600px; height: 100%;" class="list-table">
          <forceComponent v-if="forceData" ref="forceComponent" :bus-data="forceData" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import forceComponent from '@/components/Deal/forceComponent.vue'
export default {
  components: {
    forceComponent
  },
  props: {
    chartData: {
      type: Object,
      required: true
    },
    btnList: {
      type: Array,
      default: () => {
        return [
          {
            name: '出资人',
            type: 'investor',
            color: 'rgba(183,221,232)'
          },
          {
            name: 'GP',
            type: 'gp',
            color: 'rgba(254,229,153)'
          },
          {
            name: '基金',
            type: 'fund',
            color: 'rgba(221,214,229)'
          },
          {
            name: 'SPV',
            type: 'spv',
            color: 'rgba(215,227,191)'
          },
          {
            name: '项目',
            type: 'deal',
            color: 'rgba(216,216,216)'
          }
        ]
      }
    }
  },
  data() {
    return {
      graph: undefined,
      forceData: undefined,
      activeName: 'first'
    }
  },
  watch: {
    chartData: {
      handler(newVal) {
        this.graph.data(newVal)
        this.graph.render()
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      G6.registerNode(
        '流程',
        {
          drawShape(cfg, group) {
            const rect = group.addShape('rect', {
              attrs: {
                x: cfg.name ? -(cfg.name.length * 16 / 2) : -75,
                y: -25,
                width: cfg.name ? cfg.name.length * 16 : 150,
                height: 50,
                radius: 5,
                stroke: cfg.dataType === 'investor' ? 'rgba(183,221,232)' : cfg.dataType === 'gt' ? 'rgba(229,185,181)'
                  : cfg.dataType === 'gp' ? 'rgba(254,229,153)' : cfg.dataType === 'jj' ? 'rgba(221,214,229)'
                    : cfg.dataType === 'spv' ? 'rgba(215,227,191)' : 'rgba(216,216,216)',
                fill: cfg.dataType === 'investor' ? 'rgba(183,221,232)' : cfg.dataType === 'gt' ? 'rgba(229,185,181)'
                  : cfg.dataType === 'gp' ? 'rgba(254,229,153)' : cfg.dataType === 'fund' ? 'rgba(221,214,229)'
                    : cfg.dataType === 'spv' ? 'rgba(215,227,191)' : 'rgba(216,216,216)',
                lineWidth: 3
              },
              name: 'rect-shape'
            })
            if (cfg.name) {
              group.addShape('text', {
                attrs: {
                  text: cfg.name,
                  x: 0,
                  y: 0,
                  // #00287E
                  fill: '#333',
                  fontSize: 14,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  fontWeight: 'bold'
                },
                name: 'text-shape'
              })
            }
            return rect
          }
        },
        'single-node'
      )

      const container = document.getElementById('container')
      const width = container.scrollWidth
      const height = container.scrollHeight || 500
      this.graph = new G6.Graph({
        container: 'container',
        width,
        height,
        layout: {
          type: 'dagre',
          nodesepFunc: () => {
            // if (d.id === '3') {
            //   return 500;
            // }
            return 100
          },
          ranksep: 70,
          controlPoints: true
        },
        defaultNode: {
          type: '流程'
        },
        defaultEdge: {
          type: 'polyline',
          style: {
            // radius: 20,
            offset: 45,
            endArrow: true,
            lineWidth: 2,
            stroke: 'rgba(165,165,165)'
          }
        },
        // nodeStateStyles: {
        //   selected: {
        //     stroke: '#d9d9d9',
        //     fill: 'red',
        //   },
        // },
        modes: {
          // 'drag-canvas',
          default: [
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        fitView: true
      })

      if (typeof window !== 'undefined') {
        window.onresize = () => {
          if (!this.graph || this.graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          this.graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
      }
    },
    initCompany(data) {
      this.forceData = data
    }
  }
}
</script>

<style scoped>
.top{
  width:99%;
  height:10%;
  display:flex;
  justify-content: space-around;
}
.btn{
  width:150px;
  height:50px;
  border-radius:5px;
  text-align:center;
  line-height:50px;
  font-weight:bold;
  margin-top:20px;
}
#container{
  width:99%;
  height:89%;
}
</style>
